<template>
  <div class="top">
    <div class="title">饿了么</div>
    <div class="body">
        <div class="body_tit">
            <span>全部</span>
            <span>待消费</span>
            <span>待评价</span>
            <span>退款</span>
        </div>
        <div class="list" v-for="(item,index) in list" :key="index">
            <h2>{{item.name}}</h2>
            <img :src="item.picUrl" alt="">
            <div class="right">
            <div class="price">￥{{item.minPriceTip}}</div>
            <button>再来一单</button>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
// import {orderlist} from '../../../api/index'

export default {
  data(){
    return{
      list:[]
    }
  },
  mounted(){
    orderlist().then((res)=>{
      console.log(res.data.list);
      this.list=res.data.list
    })
  }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.top{
  width: 100%;
  height: 1000px;
  background-color: #f5f5f5;
}
.title{
  font-size: 26px;
  font-weight: 700;
  text-align: center;
}
.body_tit{
  display: flex;
  width: 100%;
  justify-content: space-around;
}
img{
  width: 180px;
}
.list{
  background-color: #ffffff;
  padding:10px;
  margin: 10px;
}
.list .right{
  float: right;
  line-height: 80px;
}
.list button{
  color: #ade6fd;
  border-radius: 10px;
  border: 1px solid #ade6fd;
  width: 80px;
  height: 30px;

}

</style>